<template>
  <div class="commonModel">
    <zyModel :show="show" :title="title" @submit="submitExcel" @close="close">
      <div class="fileUpload">
        <div class="stepArea">
          <div class="step">点击【下载文件】下载文件模板，点击【选择文件】，选择已填写完成的批量导入文件。</div>
          <div class="btnArea">
            <zy-button text-button type="primary" @click="downloadExcel">下载文件</zy-button>
            <el-upload class="upload" action="https://jsonplaceholder.typicode.com/posts/"
                       :before-upload="beforeExcelUpload" :auto-upload="true" accept=".xls, .xlsx"
                       :http-request="uploadExcel" :limit="1" :file-list="fileList" :multiple="false">
              <zy-button slot="trigger" text-button type="primary">选择文件</zy-button>
            </el-upload>
          </div>
          <div class="btnArea">
            <zy-button text-button type="primary">下载</zy-button>
            <div class="tips"></div>
          </div>
          <div class="tips">注: 只能上传.xls/.xlsx文件，且导入人数不超过1000人，如超过请分多次上传。</div>
        </div>
      </div>
    </zyModel>
  </div>
</template>

<script>
	export default {
		name: "commonModel",
		props: {
			show: {
				type: Boolean,
				default: () => false
			},
			type: {
				type: String,
				default: () => ''
			}
		},
		data() {
			return {
				fileList: [],
				title: '',
				downloadUrl: ''
			};
		},
		computed: {},
		watch: {
			show(newVal) {
				console.log(newVal, this.type)
				if (newVal) {
					switch (this.type) {
						case 'personnel':
							this.title = '批量导入高危人员';
							break;
						case 'good':
							this.title = '批量导入高危物品'
							break;
						case 'region':
							this.title = '批量导入高危线路'
							break;
						case 'mobile':
							console.log(312321213)
							this.title = '批量导入高危电话'
							break;
						case 'action':
							this.title = '批量导入高危行为'
							break;
					}
					this.downloadUrl = `${this.$config.serverURL}template/${this.type}.xlsx`
				}

			}
		},
		components: {},
		methods: {
			beforeExcelUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				this.fileList.push(file)
			},
			uploadExcel() {
				let list = this.fileList || [];
				if (list.length == 0) {
					this.$message({
						message: "你选择上传的文件",
						type: "warning"
					});
					return;
				}
				this.$axios.post(this.$api.uploadExcel, {
					file: this.fileList[0],
					operator: 'person',
					isFile: true
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {

					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			downloadExcel() {
				this.$import_excal(this.downloadUrl || '')
			},
			submitExcel() {
			},
			close(isRefresh) {
				this.$emit('close', isRefresh)
			},
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/government/judgeManage/common/index.less">

</style>
